<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sa="http://www.w3.org/1999/xhtml" lang="">
<head>
    <meta charset="utf-8">
    <title>设备管理</title>
    <link rel="stylesheet" th:href="@{/pear/component/pear/css/pear.css}"/>
</head>
<body class="pear-container">
<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <div class="layui-form-item layui-inline">
                    <label class="layui-form-label">设备名称</label>
                    <div class="layui-input-inline">
                        <input id="equipmentName" type="text" name="equipmentName" placeholder="请输入设备名称"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item layui-inline">
                    <button class="layui-btn layui-btn-md " lay-submit sa:hasPermission="equipment_select"
                            lay-filter="equipment-query">
                        <i class="layui-icon layui-icon-search"></i>
                        查询
                    </button>
                    <button type="reset" class="layui-btn layui-btn-md" id="resetBtn">
                        <i class="layui-icon layui-icon-refresh"></i>
                        重置
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
<div class="layui-card">
    <div class="layui-card-body">
        <table id="equipment-table" lay-filter="equipment-table"></table>
    </div>
</div>

<script type="text/html" id="equipment-toolbar">
    <button class="layui-btn  layui-btn-md" sa:hasPermission="equipment_add" lay-event="add">
        <i class="layui-icon layui-icon-add-1"></i>
        新增
    </button>
    <button class="layui-btn layui-bg-blue layui-btn-md" lay-event="refresh">
        <i class="layui-icon layui-icon-refresh-1"></i>
        刷新
    </button>
</script>

<script type="text/html" id="equipment-bar">
    <button class="layui-btn  layui-btn-sm" sa:hasPermission="equipment_update" lay-event="edit"><i
            class="layui-icon layui-icon-edit"></i>
    </button>
    <button class="layui-btn layui-btn-danger layui-btn-sm" sa:hasPermission="equipment_delete" lay-event="remove"><i
            class="layui-icon layui-icon-delete"></i>
    </button>
</script>
<script th:src="@{/pear/component/layui/layui.js}"></script>
<script th:src="@{/pear/component/pear/pear.js}"></script>
<script th:inline="javascript">
    layui.use(['table', 'form', 'jquery', 'upload'], function () {
        let baseURL = /*[[@{/}]]*/ '';
        let table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;
        let upload = layui.upload;
        let cols = [
            [{checkbox: true},
                {title: '设备名称', field: 'equipmentName', align: 'left',},
                {title: '设备类型', field: 'equipmentType', align: 'left',},
                {title: '设备描述', field: 'description', align: 'left',},
                {title: '操作', toolbar: '#equipment-bar', align: 'center'}
            ]
        ]
        table.render({
            elem: '#equipment-table',
            url: baseURL + 'meeting/equipment/list',
            request: {
                pageName: 'pageNum',
                limitName: 'pageSize'
            },
            where: {
                roomId: parent.roomId
            },
            type: 'get',
            page: true,
            curr: 1,
            cols: cols,
            skin: 'line',
            toolbar: '#equipment-toolbar',
            limits: [5, 10, 15, 20],
            parseData: function (res) {// 对从后端获得的数据进行规范，最后返回四个键值对
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.data.total,
                    "data": res.data.list, //解析数据列表
                };
            },
            response: {
                statusName: "code",
                msgName: "msg",
                statusCode: 1000,
                dataName: "data"
            },
        });

        table.on('tool(equipment-table)', function (obj) {
            if (obj.event === 'remove') {
                window.remove(obj);
            } else if (obj.event === 'edit') {
                window.edit(obj);
            }
        });

        table.on('toolbar(equipment-table)', function (obj) {
            if (obj.event === 'add') {
                window.add();
            } else if (obj.event === 'refresh') {
                window.refresh();
            }
        });

        form.on('submit(equipment-query)', function (data) {
            table.reload('equipment-table', {
                page: {
                    curr: 1
                },
                where: {
                    equipmentName: data.field.equipmentName,
                    roomId: parent.roomId
                }
            })
            return false;
        });
        document.getElementById('resetBtn').addEventListener('click', function () {
            // 重新加载表格，不带任何过滤条件
            table.reload('equipment-table', {
                where: {roomId: parent.roomId}, // 清除过滤条件
                page: {curr: 1} // 重新从第一页开始
            });
        });
        window.add = function () {
            layer.open({
                type: 2,
                title: '设备新增',
                shade: 0.1,
                area: ['600px', '600px'],
                content: 'equipment-add'
            });
        }

        window.edit = function (obj) {
            window.equipmentId = obj.data.equipmentId;
            layer.open({
                type: 2,
                title: '设备编辑',
                shade: 0.1,
                shadeClose: true,
                area: ['600px', '600px'],
                content: 'equipment-edit',
                success: function (layero, index) {
                    // 数据回显
                    let body = layer.getChildFrame('body', index)
                    let data = obj.data
                    body.find("input[name=equipmentName]").val(data.equipmentName)
                    body.find("input[name=equipmentType]").val(data.equipmentType)
                    body.find("input[name=description]").val(data.description)
                }
            })
        }
        window.remove = function (obj) {
            layer.confirm('确定要删除该设备吗？', {
                icon: 3,
                title: '提示'
            }, function (index) {
                layer.close(index);
                let loading = layer.load();
                $.ajax({
                    url: baseURL + 'meeting/equipment/delete/' + obj.data['equipmentId'],
                    dataType: 'json',
                    type: 'post',
                    success: function (result) {
                        layer.close(loading);
                        table.reload('equipment-table', {where: {roomId: parent.roomId}, page: {curr: 1}});
                        if (result.code === 1000) {
                            layer.msg(result.msg, {
                                icon: 1,
                                time: 2000
                            }, function () {

                            });
                        } else {
                            layer.msg(result.msg, {
                                icon: 2,
                                time: 2000
                            });
                        }
                    }
                });
            })
        }
        window.refresh = function () {
            table.reload('equipment-table', {where: {roomId: parent.roomId}, page: {curr: 1}});
        }
    })
</script>
</body>
</html>
